<template>
    <div class="labor_job">
        <!-- 搜索栏 -->
        <div class="option">
            <el-card>
                <div class="option_content">
                    <div class="option_title" style="display: inline">
                        搜索条件 |
                    </div>
                    <div class="input-wrapper" style="display: inline">
                        <el-input v-model="flitItem.publisher" placeholder="请输入发布人" clearable class="custom-input" />
                        <el-input v-model="flitItem.status" placeholder="请输入订单状态" clearable class="custom-input" />
                        <el-input v-model="flitItem.title" placeholder="请输入订单标题" clearable class="custom-input" />
                        <el-button type="primary" class="custom-button" @click="openDrawer">
                            发布职位
                        </el-button>
                    </div>
                </div>
            </el-card>
        </div>

        <!-- 表格数据 -->
        <div class="job_table">
            <el-card>
                <el-table ref="multipleSelection" :data="FlitTableData" row-key="id" :row-class-name="tableRowClassName"
                    style :="{ height: tableHeight }" @selection-change="handleSelectChange" @row-click="RowClick">
                    <el-table-column type="selection" :selectable="selectable" width="55" />
                    <el-table-column prop="publisher" label="发布人" />
                    <el-table-column prop="status" label="审核状态" sortable />
                    <el-table-column prop="title" label="标题" />
                    <el-table-column prop="salary" :formatter="formatPrice" label="价格" sortable />
                    <!-- 操作列 -->
                    <el-table-column label="操作">
                        <template #default="{ row }"  v-slot="scope">
                            <el-button @click="
                                handleDetail(row);
                            $event.stopPropagation();
                            " size="small" type="primary">详情
                            </el-button>
                            <el-button @click="GetComment(row.id,$event)" size="small" type="">
                                查看评论
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </div>

        <!-- 侧边栏 -->
        <div class="job_deawer">
            <el-drawer :key="steps.drawerKey" v-model="drawer" size="45%" title="详细信息" class="custom-drawer">
            
                <el-form :model="currentRowData" label-width="120px" class="form-container" status-icon>
                    <el-form-item id="publisher" label="发布人">
                        <el-input v-model="currentRowData.userName" :disabled="!isEdit.publisher" placeholder="请输入内容" />
                    </el-form-item>

                    <el-form-item id="status" label="审核状态">
                        <el-input v-model="currentRowData.status" :disabled="!isEdit.status" placeholder="请输入内容" />
                    </el-form-item>

                    <el-form-item id="title" label="标题">
                        <el-input v-model="currentRowData.title" :disabled="!isEdit.title" placeholder="请输入内容" />
                    </el-form-item>

                    <el-form-item id="maxPeople" label="最大人数">
                        <el-input v-model="currentRowData.maxPeople" :disabled="!isEdit.maxPeople"
                            placeholder="请输入内容" />
                    </el-form-item>

                    <el-form-item id="jobType" label="工作类型">
                        <el-select v-model="optionItem.selectedValue" placeholder="请选择工作类型" :disabled="!isEdit.jobType">
                            <el-option v-for="item in optionItem.option" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>

                    <el-form-item id="description" label="详情">
                        <el-input v-model="currentRowData.description" :disabled="!isEdit.description"
                            placeholder="请输入内容" />
                    </el-form-item>

                    <el-form-item id="price" label="价格">
                        <el-input v-model="currentRowData.salary" :disabled="!isEdit.price" placeholder="请输入内容" />
                    </el-form-item>
                    

                    <el-form-item id="startTime" label="开始时间">
                        <div class="block">
                            <el-date-picker v-model="currentRowData.startTime" type="date" :disabled="!isEdit.startTime"
                                plaseholder="请选择时间" />
                        </div>
                    </el-form-item>

                    <el-form-item id="endTime" label="结束时间">
                        <div class="block">
                            <el-date-picker v-model="currentRowData.endTime" type="date" :disabled="!isEdit.startTime"
                                plaseholder="请选择时间" />
                        </div>
                    </el-form-item>

                    <el-form-item id="publishTime" label="发布时间">
                        <div class="block">
                            <el-date-picker v-model="currentRowData.publishTime" type="date"
                                :disabled="!isEdit.publishTime" placeholder="请选择时间" />
                        </div>
                    </el-form-item>

                    <el-form-item id="taker" label="接取人">
                        <el-input v-model="currentRowData.takersName" :disabled="!isEdit.taker" placeholder="请输入内容" />
                    </el-form-item>

                    <el-form-item id="taker" label="审核通过后自动发布">
                        <el-switch v-model="currentRowData.autoPublish" class="ml-2" :disabled="!isEdit.autoPublish"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
                    </el-form-item>
                    <el-form-item v-if="!currentRowData.id">
                        <el-button type="primary" @click="handleSubmit()">
                            提交
                        </el-button>
                    </el-form-item>
                    <el-form-item v-else-if="currentRowData.process == `已完成`">
                        <el-button type="primary" @click="steps.stepSet(4)">
                            已完成处理
                        </el-button>
                    </el-form-item>
                    <el-form-item v-else-if="currentRowData.process == `已结算`">
                        <el-button type="primary" @click="steps.stepSet(5)">
                            已结算处理
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="goJobTaker">
                            查看接取人详情
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-drawer>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed, nextTick } from "vue";
import useJob from "@/hooks/labor/useJob";
import useTimeFormat from "@/tool/format/timeFormat"
import { useRouter } from "vue-router";
import type { Form } from "@/interface/formData";

const { timeFormat } = useTimeFormat();
const router = useRouter();

const {
    getTableData,
    steps,
    RowClick,
    currentRowData,
    drawer,
    handleSubmit,
    handleUpdate,
    openDrawer,
    handleDetail,
    handleDelete,
    multipleSelection,
    handleSelectChange,
    selectable,
    FlitTableData,
    flitItem,
    isEdit,
    formatPrice,
    optionItem,
    goJobTaker,
} = useJob();

const value1 = ref('')

onMounted(() => {
    nextTick(() => {
        getTableData();
    });
});

function GetComment(workId:number,$event?:any) {
    event?.stopPropagation();   
    router.push({ name: "Common",params:{workId} })
}

let createdTime = computed(() => {
    return timeFormat(currentRowData.value.createdTime)
});
let startTime = computed(() => {
    return timeFormat(currentRowData.value.startTime)
});
let publishTime = computed(() => {
    return timeFormat(currentRowData.value.publishTime)
});

// ==界面表格行的彩色===========================================================================

const tableRowClassName = ({
    row,
}: {
    row: Form
}) => {
    if (row.status   === "审核通过") {
        return 'success-row';
    }else if (row.status === "审核失败"){
        return 'error-row';
    }
    return ""
}


// ==界面表格的动态高度===========================================================================

const tableHeight = ref(0);
const updateTableHeight = () => {
    // 计算动态高度，比如这里设置为窗口高度的 70%
    tableHeight.value = window.innerHeight - 300;
};
onMounted(() => {
    updateTableHeight(); // 页面加载时设置表格高度
    window.addEventListener("resize", updateTableHeight); // 监听窗口大小变化
});
onBeforeUnmount(() => {
    window.removeEventListener("resize", updateTableHeight); // 清理事件监听器
});


</script>

<style scoped>
/* 自定义抽屉头部样式 */
/* 自定义抽屉头部样式，将头部设计成卡片 */
.custom-drawer .el-drawer__header {
    background-color: #fff;
    /* 设置头部背景色为白色 */
    color: #333;
    /* 设置标题颜色 */
    font-size: 20px;
    /* 设置标题字体大小 */
    font-weight: bold;
    /* 设置标题加粗 */
    text-align: center;
    /* 标题居中 */
    padding: 16px;
    /* 设置内边距 */

    /* 卡片样式 */
    border: 1px solid #e0e0e0;
    /* 添加边框 */
    border-radius: 10px;
    /* 圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* 轻微阴影效果，提升卡片感 */
    /* margin: 0 20px 20px; 为头部添加外边距，距离抽屉的顶部和底部一定距离 */
    margin: 3%;
}

/* 增加标题的字体大小 */
.custom-drawer .el-drawer__header .el-drawer__title {
    font-size: 24px;
    /* 设置标题字体更大 */
    font-weight: 600;
    /* 设置标题字体粗细 */
    color: #333;
    /* 设置标题颜色 */
    letter-spacing: 1px;
    /* 设置字间距 */
}

/* 卡片头部悬浮效果 */
.custom-drawer .el-drawer__header:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    /* 提升阴影效果，使卡片感更强 */
}

/* 为标题增加一个光辉效果 */
.custom-drawer .el-drawer__header .el-drawer__title:hover {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    /* 设置光辉效果 */
}
</style>

<style scoped>
/* .option_content {
  display: flex;// 按钮内边距 
  
} */

/* 侧边栏样式 ========================================================================================*/
.job_deawer {
    position: relative;
    /* 防止内容溢出 */
    overflow: hidden;
}

.job_process {
    margin-bottom: 20px;
}

.form-container {
    width: 100%;
    /* 让表单宽度占满整个抽屉 */
    max-width: 100%;
    /* 限制表单最大宽度 */
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.el-form-item {
    margin-bottom: 20px;
}

/* 设置输入框的样式 */
.el-input {
    width: 100%;
    border-radius: 6px;
    /* 圆角输入框 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 输入框聚焦时的效果 */
.el-input:focus {
    border-color: #409eff;
    box-shadow: 0 0 6px rgba(64, 158, 255, 0.5);
}

.form-footer {
    text-align: right;
    margin-top: 20px;
}

/* 按钮样式 */
.el-button {
    font-weight: bold;
    border-radius: 4px;
}

/* ========搜索框======================================================================================== */

.option_title {
    margin-top: 6px;
    margin-right: 15px;
    width: 6%;
    font-family: Verdana;
    /* 设置字体 */
}

.custom-button {
    width: 6%;
    /* 按钮宽度 */
    border-radius: 8px;
    /* 按钮圆角 */
    font-size: 14px;
    /* 按钮字体大小 */
    padding: 12px 20px;
    /* 按钮内边距 */
    margin-left: 50%;
    /* 将按钮居中 */

    /* 按钮的背景颜色和边框颜色 */
    background-color: white;
    /* 按钮背景为白色 */
    border: 1px solid #dcdcdc;
    /* 按钮浅灰色边框，调整边框为 1px */

    /* 按钮的阴影效果 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* 添加阴影效果 */

    /* 按钮文字颜色为灰色 */
    color: #888888;
    /* 设置字体颜色为灰色 */

    /* 鼠标悬停时效果 */
    transition: all 0.3s ease;
}

.custom-button:hover {
    background-color: #5dabf8;
    /* 悬浮时的背景色 */
    border-color: #56a9fc;
    /* 悬浮时的边框颜色 */
}

/* 按钮点击时的动态效果（使用 :active 伪类） */
.custom-button:active {
    transform: scale(0.95);
    /* 按钮点击时缩小 */
    background-color: #66b3ff;
    /* 按钮点击时的背景色 */
    box-shadow: 0 0 10px rgba(64, 158, 255, 0.5);
    /* 点击时的阴影 */
}

/* 自定义输入框样式 */
.custom-input {
    width: 10%;
    margin-right: 15px;
    /* 输入框之间的间距 */
    border-radius: 8px;
    /* 圆角 */
}

.el-input__inner {
    padding: 10px 15px;
    /* 调整内边距 */
    font-size: 14px;
    /* 设置字体大小 */
    border: 1px solid #ccc;
    /* 边框颜色 */
    border-radius: 8px;
    /* 圆角边框 */
    background-color: #f9f9f9;
    /* 背景颜色 */
}

.el-input__inner:focus {
    border-color: #409eff;
    /* 聚焦时的边框颜色 */
    background-color: #fff;
    /* 聚焦时的背景颜色 */
    box-shadow: 0 0 5px rgba(64, 158, 255, 0.3);
    /* 聚焦时的阴影效果 */
}

.job_table {
    position: relative;
    top: 18px;
}


::v-deep(.warning-row) > td {
  background-color: #fdf6ec !important;
}

::v-deep(.success-row) > td {
  background-color: #f0f9eb !important;
}

::v-deep(.error-row) > td {
  background-color: #fde2e2 !important; /* 红色背景 */
}

</style>


